import React, { useRef } from "react";
import GoBack from "@/components/TheGoBack";
import { Form, DatePicker, Button, Space } from "antd";
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import { apiVerificationRecords } from '@/request/writeOff'
import { getDateTime3 } from '@/utils/getDate'

const { RangePicker } = DatePicker;
const Search = ({ setSearchValue }) => {
  const formRef = useRef()
  const reset = () => {
    formRef.current.setFieldsValue({
      time: []
    })
    setSearchValue({})
  };
  const onFinish = values => {
    if (values.time && values.time.length) {
      values.checkStartTime = getDateTime3(values.time[0]) + ' 00:00:00'
      values.checkEndTime = getDateTime3(values.time[1]) + ' 23:59:59'
    }
    delete (values.time)
    setSearchValue(values)
  }
  return (
    <div className="p-search-box" style={{ marginTop: 20 }}>
      <Form onFinish={onFinish} ref={formRef} layout="inline">
        <Form.Item name="time" label="核销时间">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Space size="small" style={{ marginLeft: 10 }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

class Record extends React.Component {
  state = {
    columns: [
      {
        title: "订单编号",
        dataIndex: "orderCode",
        key: "orderCode",
      },
      {
        title: "核销时间",
        dataIndex: "checkTime",
        key: "checkTime",
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { searchValue, pageData } = this.state
    const { id } = this.props.match.params
    let res = await apiVerificationRecords({ ...searchValue, ...pageData, verificationPersonnelId: id })
    if (res.data && res.code === 0) {
      this.setState({
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount,
        dataSource: res.data
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => this.getData())
  };
  setSearchValue = searchValue => {
    this.setState({
      searchValue,
      pageData: {
        pageNo: 1,
        pageSize: 10,
      },
    }, () => this.getData())
  }
  render() {
    const {
      columns,
      dataSource,
      pageData: { pageNo, pageSize },
      total,
    } = this.state;
    return (
      <div className="p-layout-box commodity-list-evaluate">
        <GoBack history={this.props.history} title={"核销记录"} />
        <Search setSearchValue={this.setSearchValue} />
        <div className="p-layout-content-pagination">
          <TheTable
            columns={columns}
            dataSource={dataSource}
            scroll={{ x: "max-content", y: 440 }}
          />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
      </div>
    );
  }
}

export default Record;
